<template>
  <div class="main-body">
    <article-list/>
    <div>
      <img class="fixed-advertisement" :src="fixedAdvertisement" alt="">
      <advertisement :advertisements="advertisements"/>
      <download style="margin: 10px"/>
      <author-rank-side :authors="authors"/>
    </div>
  </div>
</template>

<script>
import ArticleList from "@/views/home/components/main-body/article-list";
import Advertisement from "@/views/home/components/main-body/advertisement";
import advertisement from "@/api/advertisement";
import AuthorRankSide from "@/views/home/components/main-body/author-rank-side";
import user from "@/api/user";
import Download from "@/components/download";

export default {
  name: "main-body",
  components: {Download, AuthorRankSide, Advertisement, ArticleList},
  data() {
    return {
      fixedAdvertisement: 'https://img2.baidu.com/it/u=2653976460,3060483604&fm=26&fmt=auto',
      advertisements: [],
      authors: [],
    }
  },
  created() {
    advertisement.getList(3)
        .then((res) => {
          this.advertisements = res.data
        })
        .catch((err) => {
          this.$message({type: 'error', message: '广告接口错误：'+err});
        })
    user.rank(3)
        .then((res) => {
          this.authors = res.data
        })
        .catch((err) => {
          this.$message({type: 'error', message: '用户排行榜接口错误：'+err});
        })
  }
}
</script>

<style lang="less" scoped>
.main-body {
  display: flex;
  justify-content: center;
  /*width: 100%;*/
}
.fixed-advertisement {
  .size(260px,150px);
  margin: 10px;
}
</style>